<template>
	<view class="order-detail-container">
		<!-- 导航栏 -->
		<nav-bar title="订单详情"></nav-bar>
		
		<!-- 页面内容 -->
		<view class="page-content has-nav-bar">
			<!-- 订单状态 -->
			<view class="order-status-card">
				<view class="status-header">
					<text class="status-text">{{ orderDetail.statusText }}</text>
					<text class="status-desc">{{ getStatusDesc(orderDetail.status) }}</text>
				</view>
			
			<!-- 物流信息 -->
			<view class="logistics-info" v-if="orderDetail.logistics && orderDetail.status !== 'unpaid' && orderDetail.status !== 'canceled'">
				<view class="logistics-icon">
					<image src="/static/order/logistics-icon.png" mode="aspectFit"></image>
				</view>
				<view class="logistics-content">
					<text class="logistics-status">{{ orderDetail.logistics.status }}</text>
					<text class="logistics-time">{{ orderDetail.logistics.updateTime }}</text>
				</view>
				<view class="logistics-arrow">
					<text>></text>
				</view>
			</view>
		</view>
		
		<!-- 收货地址 -->
		<view class="address-card" v-if="orderDetail.address">
			<view class="address-icon">
				<image src="/static/order/address-icon.png" mode="aspectFit"></image>
			</view>
			<view class="address-content">
				<view class="address-user">
					<text class="user-name">{{ orderDetail.address.name }}</text>
					<text class="user-phone">{{ orderDetail.address.phone }}</text>
				</view>
				<text class="address-text">{{ orderDetail.address.fullAddress }}</text>
			</view>
		</view>
		
		<!-- 商品信息 -->
		<view class="goods-card">
			<!-- 店铺信息 -->
			<view class="shop-info">
				<view class="shop-left">
					<view class="shop-tag" v-if="orderDetail.shopTag">{{ orderDetail.shopTag }}</view>
					<text class="shop-name">{{ orderDetail.shopName }}</text>
				</view>
				<text class="contact-shop" @click="contactShop">联系商家</text>
			</view>
			
			<!-- 商品列表 -->
			<view class="goods-list">
				<view class="goods-item" v-for="(item, index) in orderDetail.products" :key="index">
					<image :src="item.image" mode="aspectFill" class="goods-image"></image>
					<view class="goods-info">
						<view class="goods-name">{{ item.name }}</view>
						<view class="goods-spec">{{ item.spec }}</view>
						<view class="goods-price-count">
							<text class="goods-price">¥{{ item.price.toFixed(2) }}</text>
							<text class="goods-count">x{{ item.count }}</text>
						</view>
						
						<!-- 售后状态标签 -->
						<view class="after-sale-tag" v-if="item.afterSaleStatus">{{ item.afterSaleStatus }}</view>
					</view>
				</view>
			</view>
			
			<!-- 配送方式 -->
			<view class="delivery-info">
				<text class="delivery-label">配送方式</text>
				<text class="delivery-value">{{ orderDetail.deliveryType || '快递配送' }}</text>
			</view>
			
			<!-- 订单金额信息 -->
			<view class="order-amount">
				<view class="amount-item">
					<text class="amount-label">商品总额</text>
					<text class="amount-value">¥{{ orderDetail.goodsAmount ? orderDetail.goodsAmount.toFixed(2) : '0.00' }}</text>
				</view>
				<view class="amount-item">
					<text class="amount-label">运费</text>
					<text class="amount-value">¥{{ orderDetail.freightAmount ? orderDetail.freightAmount.toFixed(2) : '0.00' }}</text>
				</view>
				<view class="amount-item" v-if="orderDetail.discountAmount">
					<text class="amount-label">优惠</text>
					<text class="amount-value discount">-¥{{ orderDetail.discountAmount.toFixed(2) }}</text>
				</view>
				<view class="amount-total">
					<text class="total-label">实付款</text>
					<text class="total-value">¥{{ orderDetail.totalAmount ? orderDetail.totalAmount.toFixed(2) : '0.00' }}</text>
				</view>
			</view>
		</view>
		
		<!-- 订单信息 -->
		<view class="order-info-card">
			<view class="order-info-title">订单信息</view>
			<view class="order-info-item">
				<text class="info-label">订单编号</text>
				<view class="info-value-copy">
					<text class="info-value">{{ orderDetail.orderNo || orderDetail.id }}</text>
					<text class="copy-btn" @click="copyOrderNo">复制</text>
				</view>
			</view>
			<view class="order-info-item">
				<text class="info-label">下单时间</text>
				<text class="info-value">{{ orderDetail.createTime }}</text>
			</view>
			<view class="order-info-item" v-if="orderDetail.payTime">
				<text class="info-label">付款时间</text>
				<text class="info-value">{{ orderDetail.payTime }}</text>
			</view>
			<view class="order-info-item" v-if="orderDetail.shipTime">
				<text class="info-label">发货时间</text>
				<text class="info-value">{{ orderDetail.shipTime }}</text>
			</view>
			<view class="order-info-item" v-if="orderDetail.completeTime">
				<text class="info-label">完成时间</text>
				<text class="info-value">{{ orderDetail.completeTime }}</text>
			</view>
			<view class="order-info-item" v-if="orderDetail.cancelTime">
				<text class="info-label">取消时间</text>
				<text class="info-value">{{ orderDetail.cancelTime }}</text>
			</view>
			<view class="order-info-item" v-if="orderDetail.paymentMethod">
				<text class="info-label">支付方式</text>
				<text class="info-value">{{ orderDetail.paymentMethod }}</text>
			</view>
			<view class="order-info-item" v-if="orderDetail.remark">
				<text class="info-label">订单备注</text>
				<text class="info-value">{{ orderDetail.remark }}</text>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="footer-actions">
			<view class="action-btns">
				<button 
					v-for="(btn, index) in getOrderButtons(orderDetail.status)" 
					:key="index" 
					class="action-btn"
					:class="{ 'primary-btn': btn.isPrimary }"
					@click="handleOrderAction(btn.action, orderDetail.id)"
				>
					{{ btn.text }}
				</button>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
import NavBar from '@/components/NavBar.vue';

export default {
	components: {
		NavBar
	},
		data() {
			return {
				orderId: '',
				orderDetail: {
					id: '',
					orderNo: '',
					status: '',
					statusText: '',
					shopName: '',
					shopTag: '',
					products: [],
					address: null,
					logistics: null,
					goodsAmount: 0,
					freightAmount: 0,
					discountAmount: 0,
					totalAmount: 0,
					createTime: '',
					payTime: '',
					shipTime: '',
					completeTime: '',
					cancelTime: '',
					paymentMethod: '',
					deliveryType: '',
					remark: ''
				},
				// 模拟数据，实际从API获取
				mockOrderDetail: {
					id: '1001',
					orderNo: '202305201030456789',
					status: 'completed',
					statusText: '已完成',
					shopName: '达尔优京东自营旗舰店',
					shopTag: 'JD',
					products: [
						{
							id: 'p1001',
							name: '达尔优(dareu) 牧马人EM915 有线RGB鼠标 电竞游戏鼠标 黑色',
							spec: '黑色',
							price: 74.00,
							count: 1,
							image: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/169589/12/39526/53939/642a4337F7f7e1d5b/11e5631d5f02a547.jpg',
							afterSaleStatus: null
						}
					],
					address: {
						name: '张三',
						phone: '138****1234',
						fullAddress: '北京市海淀区西二旗大街58号 10号楼 1单元 101室'
					},
					logistics: {
						status: '您的订单已签收，感谢您在京东购物，欢迎再次光临',
						updateTime: '2023-05-22 14:30:25'
					},
					goodsAmount: 74.00,
					freightAmount: 0.00,
					discountAmount: 0.00,
					totalAmount: 74.00,
					createTime: '2023-05-20 10:30:45',
					payTime: '2023-05-20 10:31:22',
					shipTime: '2023-05-21 09:15:30',
					completeTime: '2023-05-22 14:30:25',
					cancelTime: null,
					paymentMethod: '微信支付',
					deliveryType: '京东快递',
					remark: ''
				}
			}
		},
		onLoad(options) {
			if(options.id) {
				this.orderId = options.id;
				this.loadOrderDetail();
			} else {
				uni.showToast({
					title: '订单ID不存在',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			// 加载订单详情
			loadOrderDetail() {
				// 模拟API请求
				setTimeout(() => {
					// 实际项目中应该调用API获取订单详情
					// this.$api.orderApi.getDetail(this.orderId)
					// 	.then(res => {
					// 		if(res && res.code === 200 && res.data) {
					// 			this.orderDetail = res.data;
					// 		}
					// 	})
					// 	.catch(err => {
					// 		console.error('获取订单详情失败:', err);
					// 	});
					
					// 使用模拟数据
					this.orderDetail = this.mockOrderDetail;
				}, 500);
			},
			
			// 根据订单状态获取状态描述
			getStatusDesc(status) {
				switch(status) {
					case 'unpaid':
						return '请在24小时内完成支付，超时订单将自动取消';
					case 'unshipped':
						return '商家正在处理您的订单，请耐心等待';
					case 'unreceived':
						return '商品已发出，请注意查收';
					case 'unrated':
						return '订单已完成，期待您的评价';
					case 'completed':
						return '订单已完成，感谢您的购买';
					case 'canceled':
						return '订单已取消';
					case 'closed':
						return '订单已关闭';
					case 'used':
						return '订单已消费完成';
					default:
						return '';
				}
			},
			
			// 复制订单号
			copyOrderNo() {
				uni.setClipboardData({
					data: this.orderDetail.orderNo || this.orderDetail.id,
					success: () => {
						uni.showToast({
							title: '订单号已复制',
							icon: 'success'
						});
					}
				});
			},
			
			// 联系商家
			contactShop() {
				uni.showToast({
					title: '联系商家功能开发中',
					icon: 'none'
				});
			},
			
			// 获取订单按钮
			getOrderButtons(status) {
				const buttons = [];
				
				switch(status) {
					case 'unpaid': // 待付款
						buttons.push({ text: '取消订单', action: 'cancel', isPrimary: false });
						buttons.push({ text: '去支付', action: 'pay', isPrimary: true });
						break;
					case 'unshipped': // 待发货
						buttons.push({ text: '申请退款', action: 'refund', isPrimary: false });
						buttons.push({ text: '提醒发货', action: 'remind', isPrimary: true });
						break;
					case 'unreceived': // 待收货
						buttons.push({ text: '查看物流', action: 'logistics', isPrimary: false });
						buttons.push({ text: '申请退款', action: 'refund', isPrimary: false });
						buttons.push({ text: '确认收货', action: 'confirm', isPrimary: true });
						break;
					case 'unrated': // 待评价
						buttons.push({ text: '申请售后', action: 'service', isPrimary: false });
						buttons.push({ text: '查看物流', action: 'logistics', isPrimary: false });
						buttons.push({ text: '去评价', action: 'rate', isPrimary: true });
						break;
					case 'completed': // 已完成
						buttons.push({ text: '申请售后', action: 'service', isPrimary: false });
						buttons.push({ text: '删除订单', action: 'delete', isPrimary: false });
						buttons.push({ text: '再次购买', action: 'rebuy', isPrimary: true });
						break;
					case 'canceled': // 已取消
						buttons.push({ text: '删除订单', action: 'delete', isPrimary: false });
						buttons.push({ text: '再次购买', action: 'rebuy', isPrimary: true });
						break;
					case 'used': // 已消费
						buttons.push({ text: '再次购买', action: 'rebuy', isPrimary: true });
						break;
					default:
						buttons.push({ text: '联系客服', action: 'service', isPrimary: false });
				}
				
				return buttons;
			},
			
			// 处理订单操作
			handleOrderAction(action, orderId) {
				console.log('处理订单操作:', action, orderId);
				switch(action) {
					case 'cancel':
						uni.showModal({
							title: '提示',
							content: '确定要取消该订单吗？',
							success: (res) => {
								if (res.confirm) {
									uni.showToast({ title: '订单已取消', icon: 'success' });
									// 这里应该调用取消订单API
									setTimeout(() => {
										uni.navigateBack();
									}, 1500);
								}
							}
						});
						break;
					case 'pay':
						uni.navigateTo({ url: `/pages/payment/index?orderId=${orderId}` });
						break;
					case 'logistics':
						uni.navigateTo({ url: `/pages/logistics/index?orderId=${orderId}` });
						break;
					case 'confirm':
						uni.showModal({
							title: '提示',
							content: '确认已收到商品吗？',
							success: (res) => {
								if (res.confirm) {
									uni.showToast({ title: '已确认收货', icon: 'success' });
									// 这里应该调用确认收货API
									setTimeout(() => {
										// 刷新订单详情
										this.loadOrderDetail();
									}, 1500);
								}
							}
						});
						break;
					case 'refund':
						uni.navigateTo({ url: `/pages/refund/apply?orderId=${orderId}` });
						break;
					case 'service':
						uni.navigateTo({ url: `/pages/after-sale/apply?orderId=${orderId}` });
						break;
					case 'rate':
						uni.navigateTo({ url: `/pages/review/index?orderId=${orderId}` });
						break;
					case 'delete':
						uni.showModal({
							title: '提示',
							content: '确定要删除该订单吗？',
							success: (res) => {
								if (res.confirm) {
									uni.showToast({ title: '订单已删除', icon: 'success' });
									// 这里应该调用删除订单API
									setTimeout(() => {
										uni.navigateBack();
									}, 1500);
								}
							}
						});
						break;
					case 'rebuy':
						uni.showToast({ title: '已加入购物车', icon: 'success' });
						// 这里应该调用加入购物车API
						break;
					case 'remind':
						uni.showToast({ title: '已提醒商家发货', icon: 'success' });
						// 这里应该调用提醒发货API
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.order-detail-container {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding-bottom: 120rpx; /* 底部操作栏高度 */
	}
	
	/* 订单状态卡片 */
	.order-status-card {
		background: linear-gradient(135deg, #ff8c4a, #ff6600);
		color: #fff;
		padding: 40rpx 30rpx;
		
		.status-header {
			display: flex;
			flex-direction: column;
			
			.status-text {
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
			
			.status-desc {
				font-size: 26rpx;
				opacity: 0.9;
			}
		}
		
		.logistics-info {
			display: flex;
			align-items: center;
			background-color: rgba(255, 255, 255, 0.1);
			padding: 20rpx;
			border-radius: 10rpx;
			margin-top: 30rpx;
			
			.logistics-icon {
				width: 80rpx;
				display: flex;
				justify-content: center;
				
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
			
			.logistics-content {
				flex: 1;
				display: flex;
				flex-direction: column;
				
				.logistics-status {
					font-size: 26rpx;
					margin-bottom: 6rpx;
				}
				
				.logistics-time {
					font-size: 24rpx;
					opacity: 0.8;
				}
			}
			
			.logistics-arrow {
				width: 60rpx;
				display: flex;
				justify-content: center;
				
				text {
					font-size: 32rpx;
				}
			}
		}
	}
	
	/* 收货地址卡片 */
	.address-card {
		background-color: #fff;
		padding: 30rpx;
		margin: 20rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: flex-start;
		
		.address-icon {
			width: 60rpx;
			display: flex;
			justify-content: center;
			padding-top: 6rpx;
			
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
		
		.address-content {
			flex: 1;
			
			.address-user {
				display: flex;
				margin-bottom: 10rpx;
				
				.user-name {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-right: 20rpx;
				}
				
				.user-phone {
					font-size: 28rpx;
					color: #333;
				}
			}
			
			.address-text {
				font-size: 26rpx;
				color: #666;
				line-height: 1.5;
			}
		}
	}
	
	/* 商品信息卡片 */
	.goods-card {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
		
		.shop-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
			
			.shop-left {
				display: flex;
				align-items: center;
				
				.shop-tag {
					font-size: 22rpx;
					color: #fff;
					background-color: #e1251b;
					padding: 2rpx 8rpx;
					border-radius: 4rpx;
					margin-right: 10rpx;
				}
				
				.shop-name {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
			}
			
			.contact-shop {
				font-size: 26rpx;
				color: #666;
			}
		}
		
		.goods-list {
			padding: 20rpx 30rpx;
			
			.goods-item {
				display: flex;
				position: relative;
				margin-bottom: 30rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.goods-image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
					background-color: #f5f5f5;
					flex-shrink: 0;
				}
				
				.goods-info {
					flex: 1;
					margin-left: 20rpx;
					overflow: hidden;
					
					.goods-name {
						font-size: 28rpx;
						color: #333;
						margin-bottom: 10rpx;
						line-height: 1.4;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					
					.goods-spec {
						font-size: 24rpx;
						color: #999;
						margin-bottom: 10rpx;
					}
					
					.goods-price-count {
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.goods-price {
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
						}
						
						.goods-count {
							font-size: 24rpx;
							color: #999;
						}
					}
					
					.after-sale-tag {
						position: absolute;
						right: 0;
						bottom: 0;
						font-size: 22rpx;
						color: #ff6600;
						background-color: #fff8f2;
						padding: 4rpx 12rpx;
						border-radius: 6rpx;
						border: 1rpx solid #ffebda;
					}
				}
			}
		}
		
		.delivery-info {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			border-top: 1rpx solid #f5f5f5;
			border-bottom: 1rpx solid #f5f5f5;
			
			.delivery-label {
				font-size: 26rpx;
				color: #666;
			}
			
			.delivery-value {
				font-size: 26rpx;
				color: #333;
			}
		}
		
		.order-amount {
			padding: 20rpx 30rpx;
			
			.amount-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;
				
				.amount-label {
					font-size: 26rpx;
					color: #666;
				}
				
				.amount-value {
					font-size: 26rpx;
					color: #333;
					
					&.discount {
						color: #ff6600;
					}
				}
			}
			
			.amount-total {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin-top: 20rpx;
				
				.total-label {
					font-size: 28rpx;
					color: #333;
				}
				
				.total-value {
					font-size: 32rpx;
					color: #ff6600;
					font-weight: bold;
					margin-left: 10rpx;
				}
			}
		}
	}
	
	/* 订单信息卡片 */
	.order-info-card {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 12rpx;
		padding: 30rpx;
		
		.order-info-title {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		
		.order-info-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 16rpx;
			
			.info-label {
				font-size: 26rpx;
				color: #666;
			}
			
			.info-value {
				font-size: 26rpx;
				color: #333;
			}
			
			.info-value-copy {
				display: flex;
				align-items: center;
				
				.copy-btn {
					font-size: 24rpx;
					color: #ff6600;
					margin-left: 10rpx;
					border: 1rpx solid #ff6600;
					border-radius: 4rpx;
					padding: 2rpx 10rpx;
				}
			}
		}
	}
	
	/* 底部操作栏 */
	.footer-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		justify-content: flex-end;
		border-top: 1rpx solid #eee;
		
		.action-btns {
			display: flex;
			
			.action-btn {
				margin-left: 20rpx;
				font-size: 26rpx;
				padding: 0 30rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 35rpx;
				background-color: #fff;
				color: #666;
				border: 1rpx solid #ddd;
				
				&.primary-btn {
					background-color: #ff6600;
					color: #fff;
					border: none;
				}
			}
		}
	}
</style>
